<script setup lang="ts">
import VCharts from 'vue-echarts'
import { mockAxisChart, mockPieChart } from '@/mock'

const chart1 = mockPieChart('成本统计', ['1月', '2月', '3月', '4月', '5月'], 100000)
const chart2 = mockAxisChart('line', '成本统计', ['1月', '2月', '3月', '4月', '5月'], 100000)
const chart3 = mockPieChart('项目统计', ['1月', '2月', '3月', '4月', '5月'], 1000)
const chart4 = mockAxisChart('line', '项目统计', ['1月', '2月', '3月', '4月', '5月'], 1000)
</script>

<template>
  <ElCard class="card is-flex">
    <template #header>
      <ElForm :inline="true">
        <ElFormItem label="项目">
          <ElSelect>
            <ElOption value="code1">
              项目1
            </ElOption>
            <ElOption value="code2">
              项目2
            </ElOption>
            <ElOption value="code3">
              项目3
            </ElOption>
          </ElSelect>
          <ElFormItem label="日期范围">
            <ElDatePicker type="daterange" />
          </ElFormItem>
          <ElFormItem label="人员">
            <ElSelect>
              <ElOption value="user1">
                人员1
              </ElOption>
              <ElOption value="user2">
                人员2
              </ElOption>
              <ElOption value="user3">
                人员3
              </ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem label="PM">
            <ElSelect>
              <ElOption value="pm1">
                人员1
              </ElOption>
              <ElOption value="pm2">
                人员2
              </ElOption>
              <ElOption value="pm3">
                人员3
              </ElOption>
            </ElSelect>
          </ElFormItem>
        </ElFormItem>
      </ElForm>
    </template>

    <div class="chart-container">
      <div class="row">
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart1"
        />
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart2"
        />
      </div>

      <div class="row">
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart3"
        />
        <VCharts
          class="chart"
          :autoresize="true"
          :option="chart4"
        />
      </div>
    </div>
  </ElCard>
</template>

<style lang="scss" scoped>
.card {
  height: 100%;

  .chart-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .row {
      display: flex;
      flex: 1;
      align-items: center;

      .chart {
        height: 100%;
      }
    }

    .row + .row {
      margin-top: 10px;
    }
  }
}
</style>

<route lang="json5">
{
  "meta": {
    "index": 2,
    "title": "工时统计",
  },
}
</route>
